<template>
  <div class="topPillar">
    <div style="width:100%;display: flex;color: #3de7c9;height:50px;margin-left: 50px; align-items: center;">现存确诊top5</div>
    <EchartTemp :options="options" style="width: 100%;height: 100%"></EchartTemp>
  </div>
</template>

<script>
import EchartTemp from "@/common/echartTemp";

export default {
  name: "CurrDataPillar",
  props: {
    areaTopData:[]
  },
  data() {
    return {
      options:{}
    }
  },
  components: {
    EchartTemp
  },
  watch: {
    areaTopData:{
      handler(val) {
        this.drawTable(val)
      },
      deep: true,
      immediate: true, // 初次监听即执行
    }
  },
  mounted() {
  },
  methods: {
    drawTable(data) {
      let resData = []
      let title = []
      for (let info in data) {
        if (info > 4) break
        let currConfirm = data[info]?.totalConfirm - data[info]?.totalDead - data[info]?.totalHeal
        resData.push(currConfirm)

        title.push(data[info]?.addressName)
      }
      let resConf = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: title.reverse()
        },
        series: [{
          name: '现存确诊',
          type: 'bar',
          data: resData.reverse()
        }]
      }
      this.options = resConf
    },
  }
}
</script>

<style scoped lang="scss">
.topPillar{
  width:100%;
  height:100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
</style>
